<template>
    <div>
        <div class="condition-box">
            <el-form :inline="true" :model="condition" class="demo-form-inline">
            <el-form-item label="订单状态" label-width="70px">
                <el-select v-model="condition.status" placeholder="状态" clearable size="mini">
                    <el-option
                            v-for="s in states"
                            :key="s.value"
                            :label="s.text"
                            :value="s.value">
                    </el-option>
                </el-select>
            </el-form-item>
                <el-button type="primary" @click="search" size="mini">查询</el-button>
                <el-button type="primary" @click="update(tableData)" size="mini">一键修改到期订单状态</el-button>
            </el-form>
        </div>
            <div class="tablef">
                <el-table :data="tableData" height="400px" border size="mini"  style="width: 100%; text-align: center;" >
                    <el-table-column prop="oderid" label="订单编号"> </el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="finishTime" label="结束时间"> </el-table-column>
                    <el-table-column prop="orderUser" label="用户名"></el-table-column>
                    <el-table-column prop="houseid" label="房屋id"></el-table-column>
                    <el-table-column prop="orderAdmin" label="处理管理员"> </el-table-column>
                    <el-table-column label="操作"  width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini"@click="update([scope.row])">过期</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        <el-pagination small background
                       :page-sizes="[5,10,15,20]"
                       layout="total,sizes,prev,pager,next"
                       :current-page="currentPage"
                       :page-size="displayCount"
                       :total=total
                       @current-change="changeCurrentPage"
                       @size-change="changeSize"
        >
        </el-pagination>
    </div>
</template>
<script>
    import {oderSearch,oderUpdateAll} from "../../api/user";
    export default {
        data(){

            return{
                currentPage:1,
                displayCount:5,
                total:0,
                tableData:[],
                condition: {
                    oderid: null,
                    status:1,
                    startTime:'',
                    finishTime:'',
                    orderUser:'',
                    orderAdmin:'',
                    page:null,
                    limit:null,
                },
                states:[
                    {value:0,text:'过期'},
                    {value:1,text:'进行中'},

                ],
            }
        },

        methods:{
            search(){
                // 获取当前北京时间的时间戳（单位为毫秒）
                let stamp= new Date().getTime() + 8 * 60 * 60 * 1000;

// 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
                let beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
// Fri Nov 10 2023 17:47:40 GMT+0800 (中国标准时间)
// 2023-11-10T09:49:02.550Z
// 2023-11-10 09:49:02

// 输出"2023-11-02 06:05:05"
                this.condition.page=this.currentPage,
                    this.condition.limit=this.displayCount,
                this.condition.finishTime=beijingTime
                oderSearch(
                    this.condition
                ).then((res)=>{
                    this.tableData = res.data;
                    this.total=res.count
                })

            },
            update(tableData){
                oderUpdateAll(
                    tableData
                ).then((res)=>{
                    if(res.msg=='OK') {
                        this.$message.success('修改成功!')
                        this.addvisible = false;
                        this.search()
                    }
                    else {
                        this.$message.error('修改失败!')
                    }

                })

            },
            changeUserState(username,state){

            },
            //当前页码改变触发
            changeCurrentPage(val){
                this.currentPage = val ;
                this.search();
            },
            //每页展示的记录数发生改变
            changeSize(val){
                this.displayCount = val ;
                this.search();
            },

        },
        mounted(){
            this.search()
    }

    }

</script>
<style scoped>
    .content-box {
        width: calc(100% - 10px);
        height: 100%;
    }

    .condition-box, .button-box {
        height: 40px;
        line-height: 40px;
    }

    .condition-box {
        color: #909399;
        font-size: 12px;
    }

    .el-pagination {
        height: 30px;
        padding-top: 10px;
    }

    .el-input, .el-select {
        width: 120px;
        margin-right: 10px;
    }
</style>
<style>
    .el-pagination .el-select .el-input > input {
        height: 22px;
    }

    .el-pagination > span {
        float: left;
    }
</style>